<template>
  <view class="contentBg">
    <!--    <cu-custom bgColor="bg-yellow">-->
    <!--      <block slot="content">用户中心</block>-->
    <!--    </cu-custom>-->
    <view class="gradient-linear" :style="[{'padding-top':barH + 'px'}]">


      <view class=''>
        <view class="cu-list menu-avatar">
          <view class="cu-item bg-transparent">
            <view class="cu-avatar round lg"
                  @tap="showModal"
                  :style="'background-image:url('+avatarUrl+');'"></view>
            <view class="content">
				<view class="text-cust-grey text-sm flex">
				  <view v-if="userId!=undefined" class="text-cut">
				    <text class="text-black">{{ userName }}</text>&nbsp; &nbsp;{{ phone }}
				  </view>
				  <view v-if="!userId" class="text-cut text-white text-bold" open-type="getUserInfo" lang="zh_CN"
				        @tap="getUserInfo">请先登录
				  </view>
				</view>
              <view class="text-cust-black" v-if="userName!=''">
                <view class="title-hy">
                  <text class="cuIcon-medal text-orange"></text>
                  <text v-if="userType == '2'" class="txt-type">{{ownerShop.cardTypeName}}</text>

                  <text>
                    {{userType==1? (adminLevel == 1 ? ('等级：L'+upgradeLevel) : '['+adminLevelName+']') : ''}}
                    {{userType==1? (adminLevel != 1?'区域合伙人': '') :'商户'}}
                  </text>
                  <text v-if="userType == '2'" class="txt-sj">
                    ({{ownerShop.cardStartTime}}~{{ownerShop.cardEndTime}})</text>
                </view>
                <!-- <view class='cu-tag bg-yellow' v-if="userType==1">团队长</view>
                <view class='cu-tag bg-yellow' v-else-if="userType ==2">商户</view> -->
               <!-- <view> &nbsp; &nbsp;{{ userName }}</view> -->
              </view>
<!--              <view class="text-cust-black" v-if="userId && userType!= 2 ">-->
<!--                <view class="yqm" @tap="btnQrcode">-->
<!--                  <image src="@/static/images/ewm.png" class="png"/>-->
<!--                 <view> {{ promoCode }}</view>-->
<!--                </view>-->
<!--              </view>-->
            </view>

<!--            <view v-if="userId && userType!= 2 " class="userid">-->
<!--              <view class="whiteColor" v-if="auditStatus==1">已认证</view>-->
<!--              <view class="whiteColor" v-else @tap="authInfo">去认证</view>-->
<!--            </view>-->
            <view v-if="userId && userType!= 2 " class="userid">
              <view class="yqm" @tap="btnQrcode">
                <image src="@/static/images/ewm.png" class="png"/> &nbsp;&nbsp;
              </view>
            </view>
            <!-- userid end -->
          </view>
        </view>

        <view v-if="userType==1 && adminLevel==1" class="shwdsy margin-sm">
          <view class="sy-txt">收益详情</view>
          <view class="flex">
            <view class="flex-sub text-center">
              <view class="font-txx-1">{{ adminIncomePersonVo.totalPrice }}</view>
              <view class="font-txt-2">合计收益</view>
            </view>
            <view class="flex-sub text-center border-l-r">
              <view class="font-txx-1">{{ adminIncomePersonVo.yearPrice }}</view>
              <view class="font-txt-2">本年收益</view>
            </view>
            <view class="flex-sub text-center">
              <view class="font-txx-1">{{ adminIncomePersonVo.estimatePrice }}</view>
              <view class="font-txt-2">预计收益</view>
            </view>
          </view>
        </view>

        <view v-if="userType!=2" class="wdsy margin-sm">
          <view class="sy-txt">团队管理&nbsp;></view>
          <view class="flex clear">
            <view class="flex-sub text-center ">
              <view class="font-txx-1">团队人数</view>
              <view class="font-txt-2">总：{{adminStatisticsPersonVo.teamCount}}<font class="desc">&nbsp;</font></view>
              <view class="font-txt-2">今：{{adminStatisticsPersonVo.dayTeamCount}}<font class="desc">&nbsp;</font></view>
            </view>
            <view class="flex-sub text-center border-l-r">
              <view class="font-txx-1">商户数</view>
              <view class="font-txt-2">总：{{adminStatisticsPersonVo.shopCount}}<font class="desc">&nbsp;</font></view>
              <view class="font-txt-2">今：{{adminStatisticsPersonVo.dayShopCount}}<font class="desc">&nbsp;</font></view>
            </view>
            <view class="flex-sub text-center border-l-r">
              <view class="font-txx-1">订单数</view>
              <view class="font-txt-2">总：{{adminStatisticsPersonVo.orderCount}}<font class="desc">&nbsp;</font></view>
              <view class="font-txt-2">今：{{adminStatisticsPersonVo.dayOrderCount}}<font class="desc">&nbsp;</font></view>
            </view>
            <view class="flex-sub text-center ">
              <view class="font-txx-1">完成订单数</view>
              <view class="font-txt-2">总：{{adminStatisticsPersonVo.successOrderCount}}<font class="desc">&nbsp;</font></view>
              <view class="font-txt-2">今：{{adminStatisticsPersonVo.daySuccessOrderCount}}<font class="desc">&nbsp;</font></view>
            </view>
          </view>
        </view>

        <view v-if="userType!=2" class="bg-yqxj margin flex align-center " @tap="btnQrcode">
          <view class="padding-left-xl txt-yqxj">邀请下级&nbsp;&nbsp;&nbsp;共享收益&nbsp;</view>
          <view class="flex-twice text-right padding-right txt-ljyq">立即邀请&nbsp;></view>
        </view>
      </view>

      <view v-if="userType==2" class="shwdsy margin-sm">
        <view class="sy-txt">我的收益</view>
        <view class="flex">
          <view class="flex-sub text-center">
            <view class="font-txx-1">{{ adminStatisticsShopVo.orderPrice }}</view>
            <view class="font-txt-2">订单金额</view>
          </view>
          <view class="flex-sub text-center border-l-r">
            <view class="font-txx-1">{{ adminStatisticsShopVo.orderVierifyPrice }}</view>
            <view class="font-txt-2">核销金额</view>
          </view>
          <view class="flex-sub text-center">
            <view class="font-txx-1">{{ adminStatisticsShopVo.orderCount }}</view>
            <view class="font-txt-2">订单数量</view>
          </view>
        </view>
      </view>

      <view v-if="userType!=2 && showModel == true" class="hyjl padding-left padding-right margin-top-lg">
        <view class="txt-lyjl">会员奖励 <image src="@/static/images/my/lw.png" class="lw" /></view>
        <view class="flex align-center">
          <view class="flex-sub box text-center">
            <view class="jl">累计奖励</view>
            <view class="je clore_blue">¥59.90</view>
          </view>
          <view style="width: 10rpx"></view>
          <view class="flex-sub box text-center">
            <view class="jl">今日奖励</view>
            <view class="je clore_red">¥59.90</view>
          </view>
        </view>
        <view class="qydl margin-top">
          <view class="tip1"><image src="@/static/images/my/dz.png" class="img-dz"/>江苏省南通市市通州区</view>
          <view class="tip1"><image src="@/static/images/my/time.png" class="img-time"/>加入时间 2024/07/14 12:12:13 </view>
          <view class="txt-qydl">
            区域代理&nbsp;>
          </view>
          <view class="tgdd">
            <view class="title-tgdd">
              <image src="@/static/images/my/dd2.png" class="img-dd" /> 推广订单
            </view>
            <view class="flex margin-top">
              <view class="flex-sub">
                <view class="xx-tile">累计支付</view>
                <view class="sz-ms">1000<font class="f-ms">&nbsp;位</font></view>
              </view>
              <view class="flex-sub">
                <view class="xx-tile">累计完结</view>
                <view class="sz-ms">300<font class="f-ms">&nbsp;单</font></view>
              </view>
              <view class="flex-sub">
                <view class="xx-tile">进行中</view>
                <view class="sz-ms">200<font class="f-ms">&nbsp;单</font></view>
              </view>
            </view>
          </view>
          <view class="yjjs">
            <view class="title-yjjs">
              <image src="@/static/images/my/yj.png" class="img-yj" /> 佣金结算
            </view>
            <view class="flex margin-top">
              <view class="flex-sub">
                <view class="xx-tile">累计支付</view>
                <view class="sz-ms">1000<font class="f-ms">&nbsp;位</font></view>
              </view>
              <view class="flex-sub">
                <view class="xx-tile">累计完结</view>
                <view class="sz-ms">300<font class="f-ms">&nbsp;单</font></view>
              </view>
              <view class="flex-sub">
                <view class="xx-tile">进行中</view>
                <view class="sz-ms">200<font class="f-ms">&nbsp;单</font></view>
              </view>
            </view>
          </view>
          <view class="ffhy">
            <view class="title-ffhy">
              <image src="@/static/images/my/hy.png" class="img-hy" /> 付费会员
            </view>
            <view class="flex margin-top">
              <view class="flex-sub">
                <view class="xx-tile">累计支付</view>
                <view class="sz-ms">1000<font class="f-ms">&nbsp;位</font></view>
              </view>
              <view class="flex-sub">
                <view class="xx-tile">累计完结</view>
                <view class="sz-ms">300<font class="f-ms">&nbsp;单</font></view>
              </view>
              <view class="flex-sub">
                <view class="xx-tile">进行中</view>
                <view class="sz-ms">200<font class="f-ms">&nbsp;单</font></view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>


    <!--    <user-statsitc></user-statsitc>-->

    <view class="cu-list menu sm-border card-menu padding-top ">
      <view class="cu-item arrow" @tap="gotoUserInfo" v-if="userId && userType==1">
        <view class="content">
          <image src="@/static/images/my/gr.png" class="png" mode="aspectFill"></image>
          <text class="text-left padding-left-sm">个人信息</text>
        </view>
      </view>
      <view class="cu-item arrow" @tap="gotoShopInfo" v-if="userId && userType==2">
        <view class="content">
          <image src="@/static/images/my/gr.png" class="png" mode="aspectFill"></image>
          <text class="text-left padding-left-sm">商户信息</text>
        </view>
      </view>
      <view class="cu-item arrow" @tap="myTeamUserList" v-if="userType!=2">
        <view class="content">
          <image src="@/static/images/my/hzr.png" class="png" mode="aspectFill"></image>
          <text class="text-left padding-left-sm">区域合伙人管理</text>
        </view>
      </view>
      <view class="cu-item arrow" @tap="myShop" v-if="userType!=2">
        <view class="content">
          <image src="@/static/images/my/sh.png" class="png" mode="aspectFill"></image>
          <!--          <text class="cuIcon-list text-lg"/>-->
          <text class="text-left  padding-left-sm">我的商户</text>
        </view>
      </view>


      <view class="cu-item arrow" @tap="myOrder">
        <view class="content">
          <image src="@/static/images/my/dd.png" class="png" mode="aspectFill"></image>
          <!--          <text class="cuIcon-list text-lg"/>-->
          <text class="text-left  padding-left-sm">我的订单</text>
        </view>
      </view>

      <!--      <view class="cu-item arrow" @tap="myVerifyOrder">-->
      <!--        <view class="content">-->
      <!--          <image src="@/static/images/my/hx.png" class="png" mode="aspectFill"></image>-->
      <!--&lt;!&ndash;          <text class="cuIcon-list text-lg"/>&ndash;&gt;-->
      <!--          <text class="text-left  padding-left-sm">我的核销</text>-->
      <!--        </view>-->
      <!--      </view>-->


      <!--      <view class="cu-item arrow" @tap="myTeamUserList">-->
      <!--        <view class="content">-->
      <!--          <text class="cuIcon-list text-lg"/>-->
      <!--          <text class="text-left">团队客户</text>-->
      <!--        </view>-->
      <!--      </view>-->
      <view class="cu-item arrow" @tap="hzr" v-if="userType!=2">
        <view class="content">
          <image src="@/static/images/my/dls.png" class="png" mode="aspectFill"></image>
          <!--          <text class="cuIcon-list text-lg"/>-->
          <text class="text-left padding-left-sm">申请成为代理</text>
        </view>
      </view>
      <view class="cu-item arrow" @tap="authInfo" v-if="userType!=2 && auditStatus!=1">
        <view class="content">
          <image src="@/static/images/my/phoneV.png" class="png" mode="aspectFill"></image>
          <!--          <text class="cuIcon-list text-lg"/>-->
          <text class="text-left padding-left-sm">区域合伙人认证</text>
        </view>
      </view>
      <view class="cu-item arrow" @tap="myCard" v-if="userType==2">
        <view class="content">
          <image src="@/static/images/my/hzr.png" class="png" mode="aspectFill"></image>
          <!--          <text class="cuIcon-list text-lg"/>-->
          <text class="text-left padding-left-sm">我的权益</text>
        </view>
      </view>
      <view class="cu-item arrow" @tap="gotoVerify" v-if="userType==1">
        <view class="content">
          <image src="@/static/images/my/hy2.png" class="png" mode="aspectFill"></image>
          <!--          <text class="cuIcon-list text-lg"/>-->
          <text class="text-left padding-left-sm">核销信息</text>
        </view>
      </view>
      <view class="cu-item arrow" @tap="helpCenter">
        <view class="content">
          <image src="@/static/images/my/bz.png" class="png" mode="aspectFill"></image>
          <!--          <text class="cuIcon-list text-lg"/>-->
          <text class="text-left padding-left-sm">帮助中心</text>
        </view>
      </view>

      <view class="cu-item arrow">
        <view class="content">
          <image src="@/static/images/my/bb.png" class="png" mode="aspectFill"></image>
          <!--          <text class="cuIcon-apps text-lg"/>-->
          <text class="text-left padding-left-sm">当前版本</text>
        </view>
        <view class="action">
          <text>V{{ version }}</text>
        </view>
      </view>

      <!--      <view class="cu-item arrow" @tap="aboutUs">-->
      <!--        <view class="content">-->
      <!--          <text class="cuIcon-info text-lg"/>-->
      <!--          <text class="text-left">关于我们</text>-->
      <!--        </view>-->
      <!--      </view>-->
    </view>

  </view>
</template>

<script setup lang="ts">
import {onMounted, computed, reactive, ref, getCurrentInstance} from 'vue'
import {onLoad, onReady, onShow} from '@dcloudio/uni-app';
import {useStore} from "@/common/store";
import {getUser,getUserStatistics, getWeixinOpenid, saveUser} from "../../common/api/user";
import UserStatsitc from "../../components/UserStatsitc.vue";

const store = useStore();

const token = computed(() => store.token)
const userId = computed(() => store.userId)
const userType = computed(() => store.userType)
const upgradeLevel = computed(() => store.upgradeLevel)
const userName = computed(() => store.userName)
const adminLevel = computed(() => store.adminLevel)
const adminLevelName = computed(() => store.adminLevelName)
const avatarUrl = computed(() => store.avatarUrl)
const phone = computed(() => store.phone)
const promoCode = computed(() => store.promoCode)
const promoCodeUrl = computed(() => store.promoCodeUrl)
const auditStatus = computed(() => store.auditStatus)
const ownerShop = computed(() => store.ownerShop)


const oraUrlPage = ref('')
const redirectType = ref('')

const version = ref('0.0.1')
const otPromoCode = ref('')
const showModel = ref(false)

const adminStatisticsShopVo = ref({
  orderPrice: 0,
  orderVierifyPrice: 0,
  orderCount: 0
});

const adminStatisticsPersonVo = ref({
  teamCount:0,
  dayTeamCount:0,
  shopCount:0,
  dayShopCount:0,
  orderCount:0,
  dayOrderCount:0,
  successOrderCount:0,
  daySuccessOrderCount:0
});
const adminIncomePersonVo = ref({
  totalPrice:0,
  yearPrice:0,
  estimatePrice:0
});

const mpGetUserInfo = (result) => {
  console.log('mpGetUserInfo', result);
}

const {appContext} = getCurrentInstance()
const barH = ref(60)
barH.value = appContext.config.globalProperties.CustomBar;

const hzr = () => {
  initLogin();
  if (userId) {
    uni.navigateTo({
      url: `/pages/user/applyhzq`
    })
  }
}

// 我的权益
const myCard = () => {
  console.log('myCard')
  initLogin();
  if (userId) {
    uni.navigateTo({
      url: `/pages/user/myShopCard`
    })
  }
}

const initLogin = () => {
  if ((!userId.value) || userId.value == 0) {
    uni.showToast({
      icon: 'none',
      duration: 3000,
      title: `您还没有登录，请先登录！`
    });
  }
}

const myVerifyOrder = () => {
  initLogin();
  // 核销订单
  if (userId) {
    uni.navigateTo({
      url: `/pages/order/myVerifyOrderList`
    })
  }
};

const toMyIncome = () => {
  initLogin();
  uni.navigateTo({
    url: `/pages/user/myIncome`
  })

}

const myTeamUserList = () => {
  // 核销订单
  if (userId) {
    uni.navigateTo({
      url: `/pages/user/myTeamUser`
    })
  }
};

const gotoUserInfo = () => {
  if (userId) {
    uni.navigateTo({
      url: `/pages/user/userinfo`
    })
  }
}

const gotoShopInfo = () => {
  // uni.showToast({
  //   icon: 'none',
  //   title: '商户信息正在开发中！'
  // });
  if (userId) {
    uni.navigateTo({
      url: `/pages/user/userShopinfo`
    })
  }
}

const helpCenter = () => {
  initLogin();
  uni.navigateTo({
    url: `/pages/user/helpList`
  })
}

const authInfo = () => {
  initLogin();
  uni.navigateTo({
    url: `/pages/user/authInfo`
  })
}

const myShop = () => {
  initLogin();
  uni.navigateTo({
    url: `/pages/shop/myShopList`
  })
}
const myOrder = () => {
  initLogin();
  uni.navigateTo({
    url: `/pages/order/myOrderList`
  })
}
const gotoVerify = () => {
  initLogin();
  uni.navigateTo({
    url: `/pages/user/verify`
  })
}

const posterStatus = ref(false)
const btnQrcode = () => {
  uni.navigateTo({
    url: `/pages/user/dyr`
  })
}

// 关闭海报弹出框
const closePoster = (e) => {
  posterStatus.value = false
}

const getUserInfo = () => {
  if (!token.value) {
    setTimeout(() => {
      uni.showLoading({
        title: '正在登录中'
      });
      // uni.authorize({
      //   scope: 'scope.userInfo',
      //   success() {
      uni.login({
        provider: 'weixin',
        // "onlyAuthorize": true, // 微信登录仅请求授权认证
        success: function (loginRes) {
          getWeixinOpenid(loginRes).then(async res => {
            if (res && res.data && res.data.openid) {
              let openID = res.data.openid;
              console.log('openId:', openID)
              token.value = openID
              if (openID) {
                // 登录
                await getUserStore(openID);
                await initUserStatistics(openID);
                uni.hideLoading();
              } else {
                uni.showToast({
                  icon: 'none',
                  duration: 5000,
                  title: '获取用户失败,请重试!'
                })
                uni.hideLoading();
              }
            }
          });
        }
      });
      // }
      // })
    }, 1000);
  }
}

const initUserStatistics = async (openid) => {
  await getUserStatistics(openid).then(r => {
    if (r && r.data) {
      let res = r.data
      adminStatisticsShopVo.value = res.adminStatisticsShopVo;
      adminStatisticsPersonVo.value = res.adminStatisticsPersonVo;
      adminIncomePersonVo.value = res.adminIncomePersonVo;
      console.log('auditStatus:', auditStatus.value)
    }
  }).catch(e => {
  })
}

const getUserStore = async (openid) => {
  await getUser(openid).then(r => {
    if (r && r.data) {
      let res = r.data
      store.$patch({
        avatarUrl: res.url,
        userId: res.id,
        userType: res.userType,
        userName: res.name,
        hasLogin: true,
        phone: res.phone,
        token: openid,
        auditStatus: res.auditStatus,
        adminLevel: res.adminLevel,
        adminLevelName: res.adminLevelName,
        qrcode: res.qrcode,
        promoCode: res.promoCode,
        promoCodeUrl: res.promoCodeUrl,
        upgradePreLevel: res.upgradePreLevel,
        upgradeLevel: res.upgradeLevel,
        upgradeTime: res.upgradeTime,
        city: res.city,
        ownerShop: res.ownerShop
      })
      console.log('auditStatus:', auditStatus.value)
    } else {
      store.$patch({
        avatarUrl: '',
        userId: '',
        userType: '',
        userName: '',
        hasLogin: false,
        phone: '',
        auditStatus: 0,
        adminLevel: 0,
        adminLevelName: '',
        qrcode: '',
        promoCode: '',
        promoCodeUrl: '',
        upgradePreLevel: '',
        upgradeLevel: '',
        upgradeTime: '',
        city: '',
        ownerShop: {
          poiId: '',
          poiName: '',
          address:'',
          cardType:'',
          cardStartTime:'',
          cardEndTime:'',
          corporation: '',
          corporationPhone: '',
          storePhone: '',
          businessLicense: '',
          sanitaryLicensePhoto: '',
          sanitaryLicensePhotos: [],
          dredgeDouyin: '',
          dredgeBuy: '',
          businessLicensePhoto: '',
          businessLicensePhotos: [],
          corporationPhoto: '',
          corporationPhotos: [],
          corporationCard: '',
          corporationCardBank: '',
          doorPhoto: '',
          doorPhotos: [],
          evnPhoto: '',
          evnPhotos: [],
          douyinPhoto: '',
          douyinPhotos: [],
          deliveryAddress: '',
          businessHour: ''
        }
      })
      uni.showToast({ //提示
        duration: 5000,
        title: '未查询到用户信息，请先注册！'
      });
      if (otPromoCode.value) {
        oraUrlPage.value = "pages/user/index"
        redirectType.value = "switchTab"
      }

      setTimeout(() => {
        uni.navigateTo({
          url: `/pages/user/register?openid=` + openid + `&oraUrlPage=` + oraUrlPage.value + "&redirectType=" + redirectType.value + "&otPromoCode=" + otPromoCode.value
        })
      }, 3000)
    }
  }).catch(e => {

  })
}

const myTeam = () => {
  initLogin();
  uni.navigateTo({
    url: `/pages/user/myTeam`
  })
}

onLoad((options) => {
  oraUrlPage.value = options.oraUrlPage
  redirectType.value = options.redirectType
  otPromoCode.value =options.scene;
  // otPromoCode.value = "12321";
})

onMounted(async () => {
  console.log('token:', token.value)
  if (token.value) {
    await getUserStore(token.value)
    initUserStatistics(token.value);
  } else {
    await getUserInfo();
    // if (!userId.value && otPromoCode.value) {
    //   uni.navigateTo({
    //     url: "/pages/user/register?openid=" +token.value + "&oraUrlPage=pages/user/index&redirectType=switchTab"
    //   })
    // }
  }
})

</script>

<style lang="scss" scoped>
.ucenter-bg {
  /*background-color: #66ccff;*/
  height: 250rpx;
  display: flex;
  justify-content: center;
  padding-top: 40rpx;
  overflow: hidden;
  position: relative;
  flex-direction: column;
  align-items: center;
  color: #fff;
  font-weight: 300;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.cu-avatar {
  width: 134rpx;
  height: 134rpx;
}

.bg-transparent {
  height: 200rpx !important;
}

.text-cust-grey {
  padding-left: 60rpx;
}

.text-cust-black {
  padding-left: 60rpx;
  padding-top: 5rpx;
}

.ucenter-bg text {
  opacity: 0.8;
}

.ucenter-bg image {
  width: 200rpx;
  height: 200rpx;
}

.userid {
  margin-right: 20rpx;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.clear {
  clear: both;
}

.whiteColor {
  font-size: 26rpx;
  background: #FFBF36;
  border-radius: 25rpx 0rpx 0rpx 25rpx;
  padding: 10rpx;
  color: #fff;

}


.leftView {
  color: #999999;
  font-size: 20rpx;
}

.syView {
  text-align: center;

  .szView {
    font-size: 50rpx;
  }

  .tsView {
    margin-top: 16rpx;
    font-size: 24rpx;
    color: #999999;
  }
}


.page {
  height: 100Vh;
  width: 100vw;
}

.page.show {
  overflow: hidden;
}

.switch-sex::after {
  content: "\e716";
}

.switch-sex::before {
  content: "\e7a9";
}

.switch-music::after {
  content: "\e66a";
}

.switch-music::before {
  content: "\e6db";
}

/* 线性渐变 */
.gradient-linear {
  width: 100wh;
  background: linear-gradient(to bottom, #ffca61, #fffcf5);

  .wdsy {
    height: 275rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 9rpx 28rpx 7rpx rgba(4, 0, 0, 0.04);
    border-radius: 30rpx;
    width: 100wh;
    margin: 0 30rpx;

    .sy-txt {
      font-weight: bold;
      font-size: 36rpx;
      color: #2A2A2A;
      padding: 40rpx 50rpx 50rpx 40rpx;
    }

    .border-l-r {
      border-left: 1px solid #AFAFAF;
      border-right: 1px solid #AFAFAF;
    }

    .font-txx-1 {
      font-size: 36rpx;
      color: #2A2A2A;
    }

    .font-txt-2 {
      font-size: 28rpx;
      color: #757575;
    }
  }

  .shwdsy {
    height: 275rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 9rpx 28rpx 7rpx rgba(4, 0, 0, 0.04);
    border-radius: 30rpx;
    width: 100wh;
    margin: 0 30rpx;

    .sy-txt {
      font-weight: bold;
      font-size: 36rpx;
      color: #2A2A2A;
      padding: 40rpx 50rpx 50rpx 40rpx;
    }

    .border-l-r {
      border-left: 1px solid #AFAFAF;
      border-right: 1px solid #AFAFAF;
    }

    .font-txx-1 {
      font-size: 36rpx;
      color: #2A2A2A;
    }

    .font-txt-2 {
      font-size: 28rpx;
      color: #757575;
    }
  }

  .wdsy {
    height: 275rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 9rpx 28rpx 7rpx rgba(4,0,0,0.04);
    border-radius: 30rpx;
    width: 100wh;
    margin: 0 30rpx;
    .sy-txt {
      font-weight: bold;
      font-size: 36rpx;
      color: #2A2A2A;
      background: #F4658C;
      float: right;
      padding: 12rpx 30rpx;
      color: #FFFFFF;
      box-shadow: 0rpx 9rpx 28rpx 7rpx rgba(4,0,0,0.04);
      border-radius: 0rpx 20rpx;
      margin-bottom: 40rpx;
    }
    .clear{
      clear: both;
    }
    .border-l-r{
      border-left: 1px solid #AFAFAF;
      border-right: 1px solid #AFAFAF;
    }
    .font-txx-1 {
      font-size: 26rpx;
      color: #757575;
      margin-bottom: 22rpx;
    }
    .font-txt-2 {
      font-size: 34rpx;
      color: #2A2A2A;
      .desc{
        font-size: 22rpx;
        color: #757575;
      }
    }
  }
}

.png {
  width: 30rpx;
  height: 30rpx;
}
.title-hy{
	// border-radius: 20rpx 10rpx 10rpx 20rpx;
	// border: 5rpx solid #FFFFFF;
	// padding: 0rpx 6rpx 0rpx 0rpx;
	font-size: 28rpx;
	.txt-sj{
		font-size: 20rpx;
		color:#8e8e8e
	}
}
.yqm{
  display: flex;
  padding-top: 5rpx;
}

.bg-yqxj{
  background-image: url('');
  background-size: cover; /* 背景图片覆盖整个元素 */
  background-repeat: no-repeat; /* 背景图片不重复 */
  background-position: center; /* 背景图片居中 */
  width: 100wh; /* 元素宽度 */
  height: 90rpx; /* 元素高度 */
  .txt-yqxj{
    font-size: 35rpx;
    color: #FFFFFF;
    text-shadow: 0rpx 9rpx 11rpx rgba(6,0,1,0.14);
  }
  .txt-ljyq{
    font-size: 26rpx;
    color: #FFFFFF;
  }

}

.hyjl{
  background: rgb(245,245,245);
  .txt-lyjl{
    font-size: 36rpx;
    color: #111111;
    .lw {
      width: 37rpx;
      height: 33rpx;
    }
  }
  .box {
    background: #FFFFFF;
    border-radius: 10rpx;
    .jl{
      padding-top: 40rpx;
      font-size: 30rpx;
      color: #3D3D3D;
      padding-bottom: 30rpx;
    }
    .je{
      padding-bottom: 32rpx;
      font-size: 42rpx;
    }
    .clore_blue{
      color: #627DF1;
    }
    .clore_red{
      color: #FF505D;
    }
  }
  .qydl{
    background: #ffffff;
    border-radius: 23rpx;
    position: relative;
    .tip1{
      padding-left: 20rpx;
      font-size: 24rpx;
      color: #797979;
      padding-top: 20rpx;
      .img-dz{
        width: 19rpx;
        height: 24rpx;
        margin-right: 20rpx;
      }
      .img-time{
        margin-right: 20rpx;
        width: 24rpx;
        height: 24rpx;
      }
    }
    .txt-qydl{
      position: absolute;
      background: #14C3F4;
      border-radius: 0rpx 20rpx;
      right: 0rpx;
      top: 0rpx;
      padding: 12rpx 20rpx;
      color: white;
    }
    .tgdd{
      margin-top: 50rpx;
      text-align: center;
      .title-tgdd{
        font-size: 28rpx;
        color: #1F1F1F;
        .img-dd{
          width: 20rpx;
          height: 23rpx;
          padding-left: 10rpx;
        }
      }
      .xx-tile{
        font-size: 24rpx;
        color: #757575;
      }
      .sz-ms{
        font-size: 28rpx;
        color: #14C3F4;
        .f-ms{
          font-size: 20rpx;
        }
      }
    }
    .yjjs{
      margin-top: 50rpx;
      text-align: center;
      .title-yjjs{
        font-size: 28rpx;
        color: #1F1F1F;
        .img-yj{
          width: 24rpx;
          height: 24rpx;
          padding-left: 10rpx;
        }
      }
      .xx-tile{
        font-size: 24rpx;
        color: #757575;
      }
      .sz-ms{
        font-size: 28rpx;
        color: #FF2732;
        .f-ms{
          font-size: 20rpx;
        }
      }
    }
    .ffhy{
      margin-top: 50rpx;
      padding-bottom: 30rpx;
      text-align: center;
      .title-ffhy{
        font-size: 28rpx;
        color: #1F1F1F;
        .img-hy{
          width: 24rpx;
          height: 24rpx;
          padding-left: 10rpx;
        }
      }
      .xx-tile{
        font-size: 24rpx;
        color: #757575;
      }
      .sz-ms{
        font-size: 28rpx;
        color:#2CC309;
        .f-ms{
          font-size: 20rpx;
        }
      }
    }
  }
}

</style>
